﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.3.custom.min.css" rel='stylesheet' type='text/css'>	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->

<script src="js/jquery-1.10.2.min.js"></script>		<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/jquery.cookie.js"></script>																	<!-- 操作cookie用 -->
<script src="js/widgets.js" type="text/javascript"></script>												<!-- 本專案自行定義 JS -->

<title>維護人員</title>
<style type="text/css">
/*表格斜線*/
.out {
	border-top: 40px #D6D3D6 solid; /*上邊框寬度等於表格第一行行高*/
	width: 0px; /*讓容器寬度為0*/
	height: 0px; /*讓容器高度為0*/
	border-left: 90px #BDBABD solid; /*左邊框寬度等於表格第一行第一格寬度*/
	position: relative; /*讓裡面的兩個子容器絕對定位*/
}

b {
	font-style: normal;
	display: block;
	position: absolute;
	top: -40px;
	left: -35px;
	width: 35px;
}

em {
	font-style: normal;
	display: block;
	position: absolute;
	top: -20px;
	left: -85px;
	width: 55x;
}
</style>


<script type="text/javascript">

var tmp = "";

function checkDuplicated() {
	var empId = $("#empId").val();
	var ll = $("#gd").jqGrid('getDataIDs');
	var isDuplicated = false;
	for(var i=0;i<ll.length;i++){
		if (ll[i] == empId ) {
			isDuplicated = true;
		}
	}
	
	if (isDuplicated) {
		alert(empId+"已經存在，人員ID不可重覆 !");
	} else {
		var userName = $("#username").val();
		var phoneNum = $("#phonenum").val();
		var email = $("#email").val();
		var pwd = $("#pwd").val();
		var dataAdd = {"empId":empId,"pwd":pwd,"username":userName,"phonenum":phoneNum,"email":email};
		var _iCount = $("#gd").jqGrid('getGridParam', 'records');
		$("#gd").jqGrid('addRowData', _iCount+1,dataAdd);
	} 
	return [];
}


$(document).ready(function() {
	
	init("personnel.html");
	
	$("#a_form #loginUser").val( $.cookie("empId") );
	$("#a_form #isSU").val( false );
	
	$("#gd").jqGrid({
		url:'QueryEmpsInJqGrid',
		datatype: "json",
		type: "post",
	   	colNames:['人員ID','人員名稱','連絡電話','電子郵件','登入密碼'],
	   	colModel:[
	   		{name:'empId',index:'empId',key:true,editable:true,editoptions:{size:10,maxlength:12},editrules:{required:true}},
	   		{name:'empName',index:'empName',editable:true,editoptions:{size:7,maxlength:5},editrules:{required:true}},
	   		{name:'empPhone',index:'empPhone',editable:true,editoptions:{size:9,maxlength:10}},
	   		{name:'empEmail',index:'empEmail',editable:true,editrules:{required:true,email:true}},
	   		{name:"s5",editable:true,hidden: true, hidedlg: true, editrules:{edithidden:true},edittype:"password"}
	   	],
	   	rowNum: 6,
	   	forceFit:true,
	   	pager: '#pager',
	   	rownumbers: true,
	   	viewrecords: true,	
	    caption:"設定人員"
	}).jqGrid("navGrid","#pager",{add:true,edit:true,del:true,search:false,refresh:false},
	{	// edit
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		editData: { 
			currentUser: function() { return $.cookie("empId"); }
		},
		onclickSubmit:function() {
			var sysId = $("#empId").val();
			var sysName = $("#username").val();
			var dataAdd = {"empId":sysId, "username":sysName };
			$("#gd").jqGrid('setRowData', sysId,dataAdd);
		}
	},{	// add
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		editData: { 
			currentUser: function() { return $.cookie("empId"); }
		},
		onclickSubmit:function() {
			checkDuplicated();
		}
	},{	// del
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		delData: { 
			currentUser: function() { return $.cookie("empId"); }
		}
	}
);
	
	
}).tooltip();
</script>

</head>
<body>

<div id="header"></div>
<p>

<table id="gd"></table>
<div id="pager"></div>

<div id="rolePicker" class="dialog" title="角色選取">
		<table>
			<thead id="roleList"></thead>
			<tbody id="subsysList"></tbody>
		</table>
	</div>

<form id="a_form">
		<input type="hidden" id="fc" name="fc" />
		<input type="hidden" id="loginUser" name="loginUser" />	<!-- 查詢權限用 -->
		<input type="hidden" id="subsysId" name="subsysId" />
		<input type="hidden" id="isSU" name="isSU" />
	</form>


</body>
</html>